<template>
    <view class="user-container">
        <view class="user-header">
            <image class="user-logo" mode="heightFix" src="/static/images/logo_dark.png"> </image>
        </view>

        <view class="user-info">
            <view class="user-info-item">
                <view class="user-name">{{ userInfo.userName }}</view>
                <view class="user-desc">登录账号</view>
            </view>
            <view class="user-info-item">
                <view class="user-name">{{ userInfo.nickName }}</view>
                <view class="user-desc">昵称</view>
            </view>
        </view>

        <view class="foot_box">
            <view @click="logOut" class="foot_item">
                <view class=""> 退出登录</view>
                <u-icon name="arrow-right" color="#999999" size="22"></u-icon>
            </view>

            <view class="foot_item">
                <view class="">
                    敬请期待
                </view>
                <!-- <u-icon name="arrow-right" color="#999999" size="22"></u-icon> -->
            </view>
        </view>

    </view>
</template>

<script>
import { logout } from "@/utils/api";
import { removeToken } from "@/utils";
import { mapGetters } from "vuex";

export default {
    data() {
        return {};
    },
    onLoad() {},
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        async logOut() {
            let res = await uni.showModal({ content: "确认退出登录？" });
            if (res.confirm) {
                try {
                    await logout({}, { custom: { isToken: "0", catch: true } });
                    this.$u.toast("操作成功，跳转中");
                    removeToken();
                    setTimeout(() => {
                        this.$store.commit("user/SET_USER_INFO", {});
                        uni.reLaunch({ url: "/pages/login/index" });
                    }, 1500);
                } catch (error) {
                    this.$u.toast("操作失败");
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
uni-page-body {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}
.user-container {
    width: 100%;
    height: 100%;
}

.user-header {
    width: 100%;
    height: 400rpx;
    background: linear-gradient(135deg, #b17ff8, #67a6fd);
    position: relative;

    .user-logo {
        height: 60px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.user-info {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    margin-top: 10px;
    padding: 100rpx 0;
    &-item {
        text-align: center;
        width: 50%;
        box-sizing: borderr;
        padding: 0 40rpx;

        .user-name {
            color: orange;
            font-size: 14px;
        }
        .user-desc {
            margin-top: 10px;
            color: #666;
            font-size: 16px;
        }
    }
}

.foot_box {
    width: 90%;
    background: #fff;
    margin: 60rpx auto 0;
    box-sizing: border-box;
    border-radius: 16rpx;

    .foot_item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 20rpx 20rpx 30rpx;
        border-bottom: 2rpx #f4f4f4 solid;

        &:last-of-type {
            border-bottom: none;
        }
    }
}
</style>
